<template>
  <!-- <div> -->
  <div class="piecharts">
    <div id="pie1"></div>
  </div>
  <!-- </div> -->
</template>

<script setup lang="ts">
const echart = inject("echart");
let myChart = null;

const props = defineProps({
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "300px"
  }
});

onMounted(() => {
  initEcharts();
  getData();
});
onUnmounted(() => {
  if (myChart.isDisposed) {
    myChart.clear();
    myChart.dispose();
    myChart = null;
  }
});

const getData = () => {
  renderEcharts();
};
const initEcharts = () => {
  myChart = echart.init(document.getElementById("pie1"));
};
const renderEcharts = (xAxisData: any, seriesData: any) => {
  var trafficWay = [
    { name: "浙江", value: 9000 },
    { name: "江苏", value: 7000 },
    { name: "云南", value: 6530 },
    { name: "广东", value: 5220 },
    { name: "上海", value: 4640 },
    { name: "北京", value: 4520 }
  ];
  trafficWay.sort(function(a, b) {
    return b.value - a.value;
  });
  var colorAlpha = ["rgba(0,0,0,0.05)"];
  var data2 = [];
  for (var i = 0; i < trafficWay.length; i++) {
    data2.push({
      value: trafficWay[i].value,
      name: trafficWay[i].name,
      itemStyle: {
        borderColor: "#D5F900",
        borderWidth: 2,
        shadowBlur: 20,
        shadowColor: "#218de0",
        shadowOffsetx: 25,
        shadowOffsety: 20,
        color: colorAlpha[0]
      }
    });
  }
  var seriesOption = [
    {
      stack: "a",
      type: "pie",
      radius: ["0%", "70%"],
      // center: ["47%", "45%"],
      roseType: "radius",
      zlevel: 10,
      startAngle: 100,
      data: data2,
      label: {
        // normal: {
        formatter: ["{b|{b}}", "{d|{d}%}"].join("\n"),
        rich: {
          b: {
            color: "#54CBFF",
            fontSize: 14,
            lineHeight: 15
          },
          d: {
            color: "#21ffcc",
            fontSize: 13,
            lineHeight: 15
          }
          // },
        }
      },
      labelLine: {
        // normal: {
        show: true,
        length: 0,
        length2: 0,
        lineStyle: {
          color: "#0096b1"
        }
        // },
        // emphasis: {
        //   show: false,
        // },
      }
    }
  ];
  myChart.setOption({
    grid: {
      // left: -500,
      // top: 150,
      bottom: "110",
      right: "110"
      // containLabel: true,
    },
    title: {
      text: "2023年中国旅游热门城市",
      left: "center",
      // top: "6%",
      textStyle: {
        fontSize: 20,
        color: "rgba(249, 249, 249, 1)"
      },
      subtextStyle: {
        fontSize: 20
      },
      show: true
    },
    tooltip: {
      trigger: "item",
      formatter: "{b} :{d}%"
    },
    legend: {
      show: false
    },
    polar: {},
    angleAxis: {
      interval: 1,
      type: "category",
      data: [],
      z: 10,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#0B4A6B",
          width: 1,
          type: "solid"
        }
      },
      axisLabel: {
        interval: 0,
        show: true,
        color: "#0B4A6B",
        margin: 8,
        fontSize: 16
      }
    },
    radiusAxis: {
      min: 20,
      max: 120,
      interval: 20,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#0054A9",
          width: 1,
          type: "solid"
        }
      },
      axisLabel: {
        formatter: "{value} %",
        show: false,
        padding: [0, 0, 20, 10],
        color: "#0B3E5E",
        fontSize: 16
      },
      splitLine: {
        lineStyle: {
          color: "#07385e",
          width: 2,
          type: "dashed"
        }
      }
    },
    redius: 38,
    series: seriesOption,
    calculable: true
  });
};
window.addEventListener("resize", () => {
  //监听浏览器大小去改变图表尺寸
  myChart.resize();
});
</script>

<style scoped>
.piecharts {
  height: 100%;
  width: 100%;
  /* height: 500px; */
  /* background-color: aliceblue; */
}

#pie1 {
  height: 100%;
  width: 100%;
  /* background-color: aliceblue; */
}
</style>